
import React from 'react'

class PropertySettingEdit extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  componentDidMount() {
    // $(this.refs.PropertyStartTime).datetimepicker({
    //   format: 'HH:mm',
    //   inline: true
    // });
  }

  componentWillReceiveProps(props) {
    var data = props.data;
    var start_time = data.start_time,
        end_time = data.end_time;
    var start = start_time?(new Date(start_time)):null,
        end = end_time?(new Date(end_time)):null;
    data.start_hour = start?start.getHours():"";
    data.start_minute = start?start.getMinutes():"";
    data.end_hour = end?end.getHours():"";
    data.end_minute = end?end.getMinutes():"";
    this.setState({
      data: props.data
    })
  }

  onDataSubmit() {
    var name = $(this.refs.PropertyName).val(),
        phone = $(this.refs.PropertyPhone).val(),
        id = $(this.refs.PropertyId).val() || (new Date().getTime());
    var data = this.state.data;
    if (data.isjde == null) {
      data.isjde = false;
    }

    var now = new Date();
    var start_hour = data.start_hour,
        start_minute = data.start_minute,
        end_hour = data.end_hour,
        end_minute = data.end_minute;

    data.start_time = new Date(now.getFullYear(), this.pad((now.getMonth()+1), 2), this.pad(now.getDate(), 2),
                                this.pad(start_hour, 2), this.pad(start_minute, 2), "00");
    data.end_time = new Date(now.getFullYear(), this.pad((now.getMonth()+1), 2), this.pad(now.getDate(), 2),
                                this.pad(end_hour, 2), this.pad(end_minute, 2), "00");
                                
    if (this.checkEmpty(data.name) || this.checkEmpty(data.appId) || this.checkEmpty(data.province)
      || this.checkEmpty(data.city) || this.checkEmpty(data.street) || this.checkEmpty(data.zipcode)) {
        alert("请输入完整信息!!")
        return;
    }
    else if (isNaN(data.start_time) || isNaN(data.end_time)) {
      alert("请输入正确的时间!");
      return;
    }

    if (this.props.isEdit) {
      this.props.onDataUpdate(data)
    }else {
      this.props.onDataCreate(data)
    }
  }

  onChange(event, key) {
    var value = $(event.target).val();
    var data = this.state.data;
    data[key] = value;
    if(key == "zipcode"){
      data[key] = value.substr(0,6)
    }
    this.setState({
      data: data
    })
  }

  checkEmpty(str) {
    return !str || str.length == 0;
  }

  onCheckboxChange(event, key) {
    var value = event.target.checked;
    var data = this.state.data;
    data[key] = value;
    this.setState({
      data: data
    })
  }

  onSyncDateClick(event, i) {
    var data = this.state.data;
    data.bill_sync_day = i;
    this.setState({
      data: data
    })
  }

  pad(str, length) {
    str = str + ""
    if (str.length == length) {
      return str
    }
    return this.pad("0"+str, length)
  }

  renderTimeList() {
    var content = []
    for (var i = 1; i < 31; i++) {
      let index = i;
      content.push((
        <li><a onClick={(event)=>this.onSyncDateClick(event, index)}>{"每月"+i+"号"}</a></li>
      ))
    }
    return content
  }

  render() {
    var self = this;
    return (
      <div className="modal fade" id="PropertySettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="Property-modal-label">物业管理</h4>
            </div>
            <div className="modal-body">
              <div className="form-group">
                <label for="Property-name">名字</label>
                <input ref="PropertyName" type="text" className="form-control"
                        id="Property-name" placeholder="名字" value={self.state.data.name}
                        onChange={(event)=>this.onChange(event, "name")}/>
              </div>
              <div className="form-group">
                <label for="Property-phone">微信appId</label>
                <input ref="PropertyPhone" type="text" className="form-control"
                        id="Property-phone" placeholder="微信appId" value={self.state.data.appId}
                        onChange={(event)=>this.onChange(event, "appId")}/>
              </div>
              <div className="form-group">
                <label for="Property-phone">电话</label>
                <input ref="PropertyPhone" type="text" className="form-control"
                        id="Property-phone" placeholder="电话" value={self.state.data.telephone}
                        onChange={(event)=>this.onChange(event, "telephone")}/>
              </div>
              <div className="form-group">
                <label for="Property-phone">省份</label>
                <input ref="PropertyPhone" type="text" className="form-control"
                        id="Property-phone" placeholder="省份" value={self.state.data.province}
                        onChange={(event)=>this.onChange(event, "province")}/>
              </div>
              <div className="form-group">
                <label for="Property-phone">城市</label>
                <input ref="PropertyPhone" type="text" className="form-control"
                        id="Property-phone" placeholder="城市" value={self.state.data.city}
                        onChange={(event)=>this.onChange(event, "city")}/>
              </div>
              <div className="form-group">
                <label for="Property-phone">街道地址</label>
                <input ref="PropertyPhone" type="text" className="form-control"
                        id="Property-phone" placeholder="街道地址" value={self.state.data.street}
                        onChange={(event)=>this.onChange(event, "street")}/>
              </div>
              <div className="form-group">
                <label for="Property-phone">开始时间</label>
                <div className="row">

                  <input ref="PropertyStartTime" type="text" className="col-sm-2"
                          id="Property-phone" placeholder="小时" value={self.state.data.start_hour}
                          onChange={(event)=>this.onChange(event, "start_hour")}/>
                  <span className="col-sm-1">点</span>
                  <input ref="PropertyStartTime" type="text" className=" col-sm-2"
                          id="Property-phone" placeholder="分钟" value={self.state.data.start_minute}
                          onChange={(event)=>this.onChange(event, "start_minute")}/>
                  <span className="col-sm-1">分</span>
                </div>
              </div>
              <div className="form-group">
                <label for="Property-phone">结束时间</label>
                <div className="row">

                  <input ref="PropertyStartTime" type="text" className="col-sm-2"
                          id="Property-phone" placeholder="小时" value={self.state.data.end_hour}
                          onChange={(event)=>this.onChange(event, "end_hour")}/>
                  <span className="col-sm-1">点</span>
                  <input ref="PropertyStartTime" type="text" className=" col-sm-2"
                          id="Property-phone" placeholder="分钟" value={self.state.data.end_minute}
                          onChange={(event)=>this.onChange(event, "end_minute")}/>
                  <span className="col-sm-1">分</span>
                </div>
              </div>
              <div className="form-group">
                <label for="Property-phone">邮编</label>
                <input ref="PropertyPhone" type="text" className="form-control"
                        id="Property-phone" placeholder="邮编" maxlength="6" value={self.state.data.zipcode}
                        onChange={(event)=>this.onChange(event, "zipcode")}/>
              </div>
              <div className="form-group">
                <label for="Property-phone">微信支付商户号</label>
                <input ref="PropertyPhone" type="text" className="form-control"
                        id="Property-phone" placeholder="微信支付商户号" value={self.state.data.mchId}
                        onChange={(event)=>this.onChange(event, "mchId")}/>
              </div>
              <div className="form-group">
                <label for="Property-phone">API密钥</label>
                <input ref="PropertyPhone" type="text" className="form-control"
                        id="Property-phone" placeholder="API密钥"  value={self.state.data.partnerKey}
                        onChange={(event)=>this.onChange(event, "partnerKey")}/>
              </div>
              <div className="form-group jde-picker">
                <input ref="PropertyJde" type="checkbox" className="col-sm-1 checkbox"
                      checked={self.state.data.isjde}
                      onChange={(event)=>this.onCheckboxChange(event, "isjde")}/>
                <span className="col-sm-2 jde-span">JDE</span>
                <div className="dropdown col-sm-2">
                  <button className="btn btn-default dropdown-toggle" type="button" id="endTimeDrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <span ref="SyncTime">{this.state.data.bill_sync_day>0?"每月" + this.state.data.bill_sync_day+"号": "选择账单同步时间"}</span>
                    <span className="caret"></span>
                  </button>
                  <ul className="dropdown-menu long-menu" aria-labelledby="endTimeDrop">
                  <li><a onClick={(event)=>this.onEndTimeSelect(event, null, '选择账单同步时间')}>选择账单同步时间</a></li>
                    {this.renderTimeList()}
                  </ul>
                </div>
              </div>

              <input ref="PropertyId" value={self.props.data.id} hidden/>
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" className="btn btn-primary"
                      onClick={(event)=> this.onDataSubmit()}>保存</button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default PropertySettingEdit
